import React,{useState} from "react";
import {useNavigate} from 'react-router-dom'
import '../KFR_css/an_yy.css'
import { LeftOutline,SearchOutline,ClockCircleOutline,RightOutline } from 'antd-mobile-icons'

export default function An_yy() {
    const navigate = useNavigate()
    const [an_yy,setan_yy]=useState([
        {
            id:1,
            name:'北京协和医院',
            juli:'0.5km',
            address:'北京市东城区帅府园一号',
            ks:'内科',
            img:'KFR_imgs/1.webp'
        },
        {
            id:2,
            name:'北京大学第一医院',
            juli:'11.5km',
            address:'北京市西城区西什库大街8号',
            ks:'产科、妇科、小儿科',
            img:'KFR_imgs/2.webp'
        },
        {
            id:3,
            name:'中国人民解放军总医院',
            juli:'22.3km',
            address:'北京市海淀区复兴路29号',
            ks:'肾病科，血液科',
            img:'KFR_imgs/3.webp'
        },
        {
            id:4,
            name:'北京大学第三医院',
            juli:'22.3km',
            address:'机场院区，第二门',
            ks:'综合、骨科、消化科',
            img:'KFR_imgs/4.webp'
        },
        {
            id:5,
            name:'首都医科大学附属北京同仁医院',
            juli:'22.3km',
            address:'东区',
            ks:'眼科、耳鼻喉科、口腔科',
            img:'KFR_imgs/1.webp'
        },
        {
            id:6,
            name:'首都医科院附属北京天坛医院',
            juli:'23.0km',
            address:'北京市丰台区南四环西路119号',
            ks:'内科、外科、儿科、妇产科',
            img:'KFR_imgs/2.webp'
        },
    ])
    return (
        <div className="an_yy">
            <div className="an_yy_1">
                <div className="an_yy_1_1">
                    <div className="an_yy_1_1_1">
                    <LeftOutline fontSize={18}/>
                    </div>
                    <div className="an_yy_1_1_2">医院列表</div>
                </div>
            </div>

            <div className="an_yy_2">
                <div className="an_yy_2_1">
                    <div className="an_yy_2_1_1">
                        <div className="an_yy_2_1_1_1">
                            <div className="an_yy_2_1_1_1_1">
                            <SearchOutline fontSize={14}/>
                            </div>
                            <div className="an_yy_2_1_1_1_2">北京</div>
                        </div>
                    </div>
                </div>
                <div className="an_yy_2_2">
                    <div className="an_yy_2_2_1">
                    <ClockCircleOutline fontSize={16}/>
                    </div>
                    <div className="an_yy_2_2_2">我的挂号记录</div>
                    <div className="an_yy_2_2_3">查看
                    <RightOutline />
                    </div>
                </div>
            </div>

            <div className="an_yy_3">
                <div className="an_yy_3_1">
                    <div className="an_yy_3_1_1">
                    <svg t="1739522313465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8832" width="200" height="200"><path d="M512 96C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z m-9 208c22.2 0 40 18 40 40s-18 40-40 40-40-18-40-40 17.8-40 40-40z m73 400H448v-16h32V448h-32v-16h96v256h32v16z" p-id="8833" fill="#707070"></path></svg>
                    </div>
                    <div className="an_yy_3_1_2">根据距离由近及远显示医院信息</div>
                </div>
            </div>

            <div className="an_yy_4">
                <ul>
                    {
                        an_yy.map((ele, index) => {
                            return <li>
                            <div className="an_yy_4_1">
                                <div className="an_yy_4_1_1">
                                    <div className="an_yy_4_1_1_1">
                                        <img src={ele.img}/>
                                    </div>
                                    <div className="an_yy_4_1_1_2"></div>
                                </div>
                                <div className="an_yy_4_1_2">
                                    <div className="an_yy_4_1_2_1">
                                        <div className="an_yy_4_1_2_1_1">三甲</div>
                                        <div className="an_yy_4_1_2_1_2">{ele.name}</div>
                                    </div>
                                    <div className="an_yy_4_1_2_2">
                                        特色科室：{ele.ks}
                                    </div>
                                    <div className="an_yy_4_1_2_3">
                                        {ele.juli} | {ele.address}
                                    </div>
                                </div>
                            </div>
                        </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}